<template>
  <div>
    <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="110px" size="small">
      <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
        <el-col :span="24">
          <item-title title="终端信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端名称：" style="width:100%">
            <toolTip :title="datas?.terminalName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在地区：">
            <span>{{ datas.provinceName }}/{{ datas.cityName }}/{{ datas.areaName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端类型：">
            <span>
              {{ getLabel('app_mode', datas.terminalType) }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <item-title title="产品信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品名称：" style="width:100%">
            <toolTip :title="datas?.productInfoDetail.productPopularName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批准文号：">
            <span>{{ datas.productInfoDetail.approvalNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装规格：">
            <span>{{ datas.productInfoDetail.packSpecs }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="关联招商计划：">
            <el-link :underline="false" type="primary" @click="handlToPlanInfo">
              <span>{{ datas.planName }}</span>
            </el-link>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="终端价：">
            <el-link :underline="false" type="primary" @click="handlToTerminalPrice">
              <span>{{ isInteger(datas.terminalPrice) }}
                <span v-if="datas?.productInfoDetail?.sellUnit">
                  元/{{ getLabel('sell_unit', datas?.productInfoDetail?.sellUnit) }}
                </span>
              </span>
            </el-link>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="准入模式：">
            <span>
              {{ getLabel('access_mode', datas.accessMode) }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <item-title title="代理信息" />
        </el-col>
        <el-col :span="8">
          <el-form-item label="营销模式：">
            <span v-if="datas.sellMode !== 'direct'">
              {{ datas.agentAttribute === '1' ? '区域招商' : '精细招商' }}
            </span>
            <span v-else> 终端直销</span>
          </el-form-item>
        </el-col>
        <el-col v-if="datas.sellMode !== 'direct'" :span="8">
          <el-form-item label="代理商名称：">
            <toolTip :title="datas?.agentName" />
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="交易价：">
            <template v-if="datas.sellMode === 'direct'">
              <span>{{ isInteger(datas.tradePrice) }}</span>
              <span v-if="datas?.productInfoDetail?.sellUnit">
                元/{{ getLabel('sell_unit', datas?.productInfoDetail?.sellUnit) }}
              </span>
            </template>
            <template v-else>
              <el-link :underline="false" type="primary" @click="handlToTradePrice">
                <span>{{ isInteger(datas.tradePrice) }}</span>
                <span v-if="datas?.productInfoDetail?.sellUnit">
                  元/{{ getLabel('sell_unit', datas?.productInfoDetail?.sellUnit) }}
                </span>
              </el-link>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责营销职员：">
            <span>{{ datas?.headName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="data?.sellMode !== 'direct'">
          <el-form-item label="最低销量：">
            <span>{{ datas.minSale }}</span>
            <span v-if="datas?.productInfoDetail?.sellUnit">
              {{ getLabel('sell_unit', datas?.productInfoDetail?.sellUnit) }}/
            </span>
            <span>{{ getLabel('sell_num_unit', datas.minSaleUnit) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="data?.sellMode !== 'direct'">
          <el-form-item label="销量保证金：">
            <span>{{ datas.sellEarnestMoney }}元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上月销量：">
            <span>{{ datas.lastMonthSale }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="本月销量：">
            <span>{{ datas.thisMonthSale }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="注册日期：">
            <span> {{ dateFormat("yyyy-mm-dd", datas.agentRegisterTime) }}</span>
          </el-form-item>
        </el-col> -->
        <template v-if="datas?.distributeContractDetails.length > 0">
          <el-col :span="24">
            <item-title title="配送信息" />
          </el-col>
          <el-col :span="24">
            <distributor-table :list="datas.distributeContractDetails" :unit="datas.productInfoDetail?.sellUnit" />
          </el-col>
        </template>

        <el-col :span="24" style="margin-top: 20px">
          <item-title title="操作记录" />
        </el-col>
        <el-col :span="24">
          <operation-view :id="tradingProductId?.id" mode="dev" />
        </el-col>

      </el-row>
    </el-form>
    <!--终端价-->
    <detail-drawer ref="terminalPriceRef" custom-title>
      <template #title>
        终端价
      </template>
      <template #contents>
        <terminalPrice :id="datas.productPriceId" />
      </template>
    </detail-drawer>

    <!--交易价-->
    <detail-drawer ref="tradePriceRef" custom-title>
      <template #title>
        交易价
      </template>
      <template #contents>
        <tradePrice :id="datas.agentProductId" />
      </template>
    </detail-drawer>

    <!--关联招商计划-->
    <detail-drawer ref="planInfoRef" custom-title>
      <template #title>
        <span>{{ datas.planName }}</span>
      </template>
      <template #contents>
        <planInfo :id="datas.planId" />
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import { defineAsyncComponent, inject, onMounted, reactive, toRefs } from "vue";

export default {
  name: "Relationship",
  props: {
    tradingProductId: {
      type: Object,
      default: {},
    },
  },
  components: {
    tradePrice: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/agent/productAndPriceInfoView"
      )
    ),
    terminalPrice: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/product/terminalPrice")
    ),
    planInfo: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/business/planInfo")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    var data = reactive({
      datas: {
        productInfoDetail: {},
        agentDetail: {},
        distributeContractDetails: [],
      },
      tradePriceRef: null,
      terminalPriceRef: null,
      planInfoRef: null,
    });

    // 获取详情
    const handlDetail = () => {
      api.terminal
        .TRADINGPRODUCT_DETAIL(props.tradingProductId?.id)
        .then((res) => {
          if (res.code === 0) {
            for (const key in res.data.relationStandard) {
              data.datas[key] = JSON.parse(
                JSON.stringify(res.data.relationStandard)
              )[key];
            }
          }
        });
    };

    const handlToTerminalPrice = () => {
      data.terminalPriceRef.open();
    };

    const handlToTradePrice = () => {
      data.tradePriceRef.open();
    };

    const handlToPlanInfo = () => {
      data.planInfoRef.open();
    };

    onMounted(() => {
      handlDetail();
    });

    return {
      ...toRefs(data),
      handlDetail,
      handlToTradePrice,
      handlToTerminalPrice,
      handlToPlanInfo,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
